<template>
  <el-card class="box-card">
    <div slot="header">
        <el-form :inline="true" :model="listQuery.search" class="demo-form-inline">
            <el-form-item label="支持平台">
                <el-select v-model="listQuery.search.platform" placeholder="请选择">
                    <el-option
                    v-for="item in platformTypeList"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="收费类型">
                <el-select v-model="listQuery.search.is_pay" placeholder="请选择">
                    <el-option
                    v-for="item in paymentTypeList"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="所属类目">
                <el-select v-model="listQuery.search.cid" placeholder="请选择">
                    <el-option
                    v-for="item in category"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSearchSubmit">查询</el-button>
                <el-button  @click="onSearchReset">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div class="text item">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column label="插件名称">
            <template slot-scope="scope">
                <div>
                    {{scope.row.title}} 
                    <a v-if="scope.row.show_how_url" :href="scope.row.show_how_url" target="_blank">
                        <el-tag type="success" effect="dark" size="mini" style="margin-left:5px;cursor:pointer;">演示</el-tag>
                    </a>
                    <a v-if="scope.row.document_url" :href="scope.row.document_url" target="_blank">
                        <el-tag type="success" effect="dark" size="mini" style="margin-left:5px;cursor:pointer;">文档</el-tag>
                    </a>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="插件介绍" prop="note"></el-table-column>
        <el-table-column label="作者" prop="author" width="100" align="center"></el-table-column>
        <el-table-column label="价格" width="80" align="center">
            <template slot-scope="scope">
                <div v-if="scope.row.is_pay == 1" style="color:#e74c3c;">￥{{scope.row.money}}</div>
                <div v-else style="color:#18bc9c;">免费</div>
            </template>
        </el-table-column>
        <el-table-column label="下载量" prop="download" width="80" align="center"></el-table-column>
        <el-table-column label="版本" prop="version" width="100" align="center"></el-table-column>
        <el-table-column label="状态" width="100" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row['status'] == 1" type="success" effect="dark" size="mini">已启用</el-tag>
            <el-tag v-if="scope.row['status'] == 0" type="danger" effect="dark" size="mini">已禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button size="mini" type="success" @click="handleEdit(scope.row)">安装</el-button>
            <el-button size="mini" type="danger" @click="handleUnstall(scope.row)">卸载</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="登录用户是为了插件二次安装不用重复收费" :visible.sync="dialogVisible" width="30%" :before-close="function(){return dialogVisible=false;}">
        <el-tabs v-model="activeName">
            <el-tab-pane label="登录" name="login">
                <login-html :key="Math.random()"  @click="handleDialog"></login-html>
            </el-tab-pane>
            <el-tab-pane label="注册" name="register">
                <register-html :key="Math.random()" @click="handleDialog"></register-html>
            </el-tab-pane>
        </el-tabs>
     </el-dialog>
     <el-dialog title="版本信息" :visible.sync="versionVisible" width="60%" :before-close="function(){return versionVisible=false;}">
         <detail-html :detail="detail" :key="Math.random()" @click="function(){return versionVisible=false;}" @refresh="checkInstail"></detail-html>
     </el-dialog>
    </div>
  </el-card>
</template>

<script>
import {addonAjaxPost} from '@/utils/ajax'
import {getAddonsLists,unstallAddons} from '@/api/plug'
import { utils } from "@/utils/utils";
export default {
    components:{
        LoginHtml:()=>import('./src/login.vue'),
        RegisterHtml:()=>import('./src/register.vue'),
        DetailHtml:()=>import('./src/detail.vue'),
    },
    data(){
        return {
            tableData : [],
            //列表
            indexUrl:'/api/plug/getPlugList',
            listQuery: {
                page: 1,
                total: 10,
                totalCount:0,
                pageSizes:[10,20,50,100, 200, 300, 400],
                search:{}
            },
            dialogVisible:false,
            activeName:'login',
            versionVisible:false,
            detail:{},
            category:[],
            platformTypeList:[],
            paymentTypeList:[
                {id:0,title:'免费'},
                {id:1,title:'收费'}
            ]
        }
    },
    mounted() {
        this.init();
    },
    methods: {
        async init(){
            
            var that = this;
            const res = await getAddonsLists();
            addonAjaxPost(this.indexUrl,this.listQuery,function(result){
                if(res.data.list.length) {
                    result.data.list.forEach((item)=>{
                           item.status = null;
                           var alias = item.alias.charAt(0).toUpperCase() + item.alias.slice(1);
                           if(res.data.list[alias]){
                               item.status = res.data.list[alias].status;
                           }

                           return item;
                    });
                }

                that.tableData = result.data.list;
                that.category = result.data.category;
                that.platformTypeList = result.data.platformTypeList;
                that.listQuery.totalCount = result.data.totalCount;
            });
        },
        handleEdit(row){
            if(utils.cacheGet("addonappstr")) {
                this.detail = row;
                this.versionVisible = true;
            }else{
                this.dialogVisible = true;
            }
            
        },
        handleDialog(){
            this.dialogVisible = false;
        },
        onSearchSubmit(){
            this.listQuery.page = 1;
            this.init();
        },
        onSearchReset(){
            this.listQuery.search = {};
            this.listQuery.page = 1;
            this.init();
        },
        checkInstail(){
            this.versionVisible = false;
            this.$router.go(0);
        },
        async handleUnstall(item){
            var d = {
                name : item.alias,
                force:true,
            };
            const res = await unstallAddons(d);
            if(res.code == 200) {
                this.$message({
                    message: res.msg ,
                    type: 'success',
                    duration: 5 * 1000
                })
            }
        }
    }
}
</script>